<template>
  <div class="container">
    <navbar theme="transparent" :fixed="true"></navbar>
    <list>
      <cell>
        <x-image :src="imageSrcMap.topBg" :width="750"></x-image>
      </cell>
      <cell>
        <div class="tabbar">
          <text class="tabbar-text tabbar-text-active">超级红包会场</text>
          <text class="tabbar-text" @click="gotoSubMall">类目分会场</text>
        </div>
      </cell>
      <cell class="btn-center">
        <x-image :src="imageSrcMap.btn001" :width="500"></x-image>
      </cell>
      <cell v-for="hall in hallMainList" v-bind:key="hall.key">
        <div class="hall-cell">
          <x-image :src="imageSrcMap[hall.key]" @click="gotoHallDetail(hall.key)" :width="700"></x-image>
        </div>
      </cell>
      <cell class="btn-center">
        <x-image :src="imageSrcMap.btn002" ref="subMall" :width="500"></x-image>
      </cell>
      <cell v-for="hall in hallSubList" v-bind:key="hall.key">
        <div class="hall-cell">
          <x-image :src="imageSrcMap[hall.key]" @click="gotoHallDetail(hall.key)" :width="700"></x-image>
        </div>
      </cell>
    </list>
  </div>
</template>
<script>
require('./include/page-xdom')
let api = require('./include/api')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue'),
    xinput: require('./components/input.vue'),
    'x-image': require('./components/x-image.vue')
  },
  data () {
    return {
      imageSrcMap: {
        topBg: urlPath.assets('images/11/top.png'),
        btn001: urlPath.assets('images/11/001.png'),
        btn002: urlPath.assets('images/11/002.png'),
        zhc: urlPath.assets('images/11/zhc.png'),
        jhs: urlPath.assets('images/11/jhs.png'),
        nz: urlPath.assets('images/11/nz.png'),
        spsx: urlPath.assets('images/11/spsx.png'),
        tmcs: urlPath.assets('images/11/tmcs.png'),
        tmgj: urlPath.assets('images/11/tmgj.png?v=1')
      },
      hallMainList: [
        {key: 'zhc'},
        {key: 'jhs'},
        {key: 'tmgj'}
      ],
      hallSubList: [
        {key: 'nz'},
        {key: 'spsx'},
        {key: 'tmcs'}
      ]
    }
  },
  beforeDestroy () {

  },
  created () {

  },
  methods: {
    gotoSubMall() {
      let dom = weex.requireModule('dom')
      dom.scrollToElement(this.$refs.subMall)
    },
    gotoHallDetail(hallKey) {
      navigator.push('hall11-detail.js?key=' + hallKey)
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/form";
  @import "./sass/utilities";

  .container {
    background-color: #10208f;
  }

  .btn-center {
    flex-direction: row;
    justify-content: center;
    padding-bottom: 50px;
    padding-top: 30px;
  }

  .hall-cell {
    flex-direction: row;
    justify-content: center;
    margin-bottom: 30px;
  }

  .tabbar {
    background-color: #01051f;
    height: 100px;
    align-items: center;
    flex-direction: row;
    padding: 0 20px;
    &-text {
      color: #7e7b3f;
      margin-right: 20px;
      &-active {
        color: #ffffff;
      }
    }
  }
</style>
